import { defineStore } from "pinia";
import { store } from "@/store";
import designSetting from "@/settings/designSetting";

const { darkTheme, appTheme, appThemeList } = designSetting;

interface DesignSettingState {
  // 深色主题
  darkTheme: boolean;
  // 系统风格
  appTheme: string;
  // 系统内置风格
  appThemeList: string[];
}

export const useDesignSettingStore = defineStore({
  id: "app-design-setting",
  state: (): DesignSettingState => ({
    darkTheme: darkTheme,
    appTheme: appTheme,
    appThemeList: appThemeList,
  }),
  getters: {
    // 切换主题  浅色 或 深色
    getDarkTheme(): boolean {
      return this.darkTheme;
    },
    getAppTheme(): string {
      return this.appTheme;
    },
    getAppThemeList(): string[] {
      return this.appThemeList;
    },
  },
  actions: {
    setDarkTheme(value: boolean): void {
      this.darkTheme = value;
    },
    setAppTheme(value: string): void {
      this.appTheme = value;
    },
  },
});

export function useDesignSettingWithOut() {
  return useDesignSettingStore(store);
}
